﻿@{
    ViewData["Title"] = "Home Page";
    
    List<HomeNews> silde = ViewBag.Silde as List<HomeNews>;
    List<HomeNews> content = ViewBag.Content as List<HomeNews>;
    HomeNews publicity = ViewBag.Publicity as HomeNews;

}
<script>
    window.onload = function () {        
        whilescroll();
    }

    function whilescroll() {
        window.onscroll = function (e) {
            x = window.scrollY;
            if (x <= 600) {
                let y = -0.5 * x + 300;
                document.getElementById("introduced1").style.transform = "translateY(" + y + "px)"
            }
            if (x <= 855) {
                let y = -0.5 * x + 450;
                document.getElementById("introduced2").style.transform = "translateY(" + y + "px)"
            }
            if (x <= 1135) {
                let y = -0.5 * x + 600;
                document.getElementById("introduced3").style.transform = "translateY(" + y + "px)"
            }
            if (x <= 1361) {
                let y = -0.5 * x + 750;
                document.getElementById("introduced4").style.transform = "translateY(" + y + "px)"
            }


            let y = -0.5 * x;
            document.getElementById("title-img").style.transform = "translateY(" + y + "px)"

            this.console.log(x);

            
        }
    }
</script>
<style>

    #body {
        background-color:rgb(27,33,23)
    }
    #title {
        position:relative;
        height:350px;
        overflow:hidden;
    }
    #content h1 {
        color: white;
        font-style: italic;
        font-size:20px;
    }
    #content p {
        color: ivory;
        font-style: italic;
        font-size: 20px;
        width:50%;
    }
    #note {
        padding-top: 300px
    }
    #title-content {
        position: absolute;
        text-align: center;
        color: white;
        top:100px;
        left: 0px;
        right: 0px;
        bottom: 0px;
    }
    .img-responsive{
        width:100%;               
    }

</style>




<div class="row" id="body">
    <div class="container-fluid">
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner" role="listbox">
                @for (int i = 0; i < silde.Count ; i++)
                {
                    string status = string.Empty;
                    if (i == 0)
                    {
                        status = "active";
                    }
                    <div class="item @status">
                        <img src="~/images/@silde[i].Img" alt="ASP.NET" class="img-responsive " />
                        <div class="carousel-caption" role="option">
                            <p>
                                @silde[i].Title
                                @*<a class="btn btn-default" href="@silde[i].Content">
                                    详情
                                </a>*@
                            </p>
                        </div>
                    </div>
                }
            </div>
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>


        <div id="title">
            <img id="title-img" class="col-md-12  container-fluid" )" src="~/images/@publicity.Img" />
            <h1 id="title-content">@publicity.Content</h1>
        </div>
        <div style="padding-top:10px" id="content">
            @for (int i = 0; i < content.Count; i++)
            {
                string id = "introduced" + (i + 1).ToString();
            <div id="@id" class="container" style="padding-top:40px">
                @if (i % 2 == 0)
                {
                    <div class="col-md-9" style="text-align:center">
                        <p>
                            <b>@content[i].Title</b>
                            @content[i].Content
                        </p>
                    </div>
                    <div class="col-md-3">
                        <img style="height:200px" src="~/images/@content[i].Img" />
                    </div>
                }
                else
                {
                    <div class="col-md-3"> 
                        <img style="height:200px" src="~/images/@content[i].Img" />
                    </div>
                    <div class="col-md-9" style="text-align:center">
                        <p>
                            <b>@content[i].Title</b>
                            @content[i].Content
                        </p>
                    </div>

                }

            </div>
                
            }


        </div>
        <div id="note">
           
        </div>
    </div>

</div>
